<template>
  <div class="user">
    <div class="main">
      <!-- 头像 个人信息 -->
      <div class="head">
        <div class="rightTop">
          <div class="imgs">
            <router-link to="/user/set">
              <img src="@/assets/images/user/user-design.png" alt />
            </router-link>
            <router-link to="/user/message">
              <img src="@/assets/images/user/user-mess.png" alt />
            </router-link>
          </div>
        </div>
        <router-link tag="div" to="/user/userInfo" class="girl">
          <div class="left">
            <img src="@/assets/images/user/user-girl.png" alt />
            <div class="name">
              <p>{{names}}</p>
              <p>v1青铜会员</p>
            </div>
          </div>
          <div class="right">></div>
        </router-link>
      </div>
      <!-- 会员中心 -->
      <div class="vip">
        <div class="center">
          <span>会员中心</span>
          <span></span>
          <div class="small">
            <p>会员中心</p>
            <p>50元通兑券天天送</p>
          </div>
        </div>
        <img src="@/assets/images/user/user-money.png" alt />
      </div>
      <!-- 我的订单 -->
      <div class="order">
        <router-link tag="div" to="/user/order/0" class="title">
          <span>我的订单</span>
          <span>全部 ></span>
        </router-link>
        <div class="todo">
          <ul>
            <router-link to="/user/order/0" tag="li">
              <img src="@/assets/images/user/user-on.png" alt />
              <p>未消费</p>
            </router-link>
            <router-link to="/user/order/1" tag="li">
              <img src="@/assets/images/user/user-pay.png" alt />
              <p>待付款</p>
            </router-link>
            <router-link to="/user/order/2" tag="li">
              <img src="@/assets/images/user/user-said.png" alt />
              <p>待评价</p>
            </router-link>
            <router-link to="/user/order/3" tag="li">
              <img src="@/assets/images/user/user-back.png" alt />
              <p>退款</p>
            </router-link>
          </ul>
        </div>
      </div>
      <!-- 操作列表 -->
      <div class="list">
        <ul>
          <router-link to="/user/vipcard" tag="li">
            <span>影视城会员</span>
            <span>></span>
          </router-link>
          <router-link to="/user/youhuijuan" tag="li">
            <span>优惠券</span>
            <span>></span>
          </router-link>
          <router-link to tag="li">
            <span>我的收藏</span>
            <span>></span>
          </router-link>
          <router-link to tag="li">
            <span>帮助与反馈</span>
            <span>></span>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ""
    };
  },
  computed: {},
  created() {
    var obj = JSON.parse(localStorage.getItem("user"));
    this.names = obj.tel;
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" >
</style>
<style scoped lang="scss" scoped>
.user {
  height: 100%;
  background: rgba(35, 38, 45, 1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  .head {
    position: relative;
    width: 100%;
    height: 210px;
    background: url(~@/assets/images/user/user-bgc.png) no-repeat center;
    background-size: 100% 100%;
    .rightTop {
      width: calc(100% - 40px);
      margin: 0 auto;
      text-align: right;
      .imgs {
        img {
          width: 19px;
          height: 19px;
          margin: 20px 6px 30px;
        }
      }
    }
    .girl {
      margin: 0 auto;
      width: calc(100% - 40px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          width: 72px;
          height: 72px;
          margin-right: 17px;
        }
        .name {
          color: white;
          p:nth-child(1) {
            text-align: left;
            margin-bottom: 6px;
          }
          p:nth-child(2) {
            width: 99px;
            line-height: 23px;
            background: rgba(51, 54, 61, 1);
            border-radius: 5px;
            // color: white;
            opacity: 0.7;
          }
        }
      }
    }
  }
  .vip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 336px;
    height: 68px;
    margin: 0 auto;
    top: -34px;
    background: rgba(51, 54, 61, 1);
    box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1);
    border-radius: 17px;
    .center {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:nth-child(1) {
        font-size: 18px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 25px;
      }
      span:nth-child(2) {
        display: inline-block;
        width: 1px;
        height: 47px;
        background-color: #979797;
        margin: 0 13px;
      }
      p {
        margin: 10px 0;
        text-align: left;
      }
    }
    img {
      width: 32px;
      height: 34px;
    }
  }
  .order {
    overflow: hidden;
    width: 375px;
    height: 137px;
    background: rgba(51, 54, 61, 1);
    border-radius: 6px;
    margin-bottom: 20px;
    .title {
      margin: 10px auto 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - 40px);
      height: 25px;
      span:nth-child(1) {
        color: rgba(255, 255, 255, 1);
        line-height: 25px;
        font-size: 18px;
      }
      span:nth-child(2) {
        color: rgba(255, 255, 255, 0.3);
        line-height: 20px;
        font-size: 14px;
      }
    }
    .todo ul {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: calc(100% - 40px);
      li {
        img {
          width: 24px;
          height: 25px;
          margin-bottom: 14px;
        }
      }
    }
  }
  .list {
    width: 100%;
    background: rgba(51, 54, 61, 1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    ul {
      width: calc(100% - 40px);
      margin: 0 auto;
      li {
        width: 100%;
        height: 53.75px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
